<template>
  <div class="app-container">
    <el-form :inline="true" :model="dataForm" ref="dataForm" @keyup.enter.native="getDataList()">

      <el-form-item label="作业" prop="id">
        <el-select v-model="dataForm.id" placeholder="请选择作业">
          <el-option
              v-for="item in tasks"
              :key="item.id"
              :label="item.taskName"
              :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="状态" prop="id">
        <el-select v-model="dataForm.status" placeholder="请选择状态">
          <el-option key="1" label="已阅卷" value="1">已阅卷</el-option>
          <el-option key="0"label="未阅卷" value="0">未阅卷</el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="学生名字" prop="content">
        <el-input v-model="dataForm.studentName" placeholder="学生名字"></el-input>
      </el-form-item>
      <el-form-item label="题目名称" prop="content">
        <el-input v-model="dataForm.content" placeholder="题目名称"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button icon="el-icon-search" type="primary" @click="getDataList()">查询</el-button>
        <el-button icon="el-icon-refresh-left" @click="resetForm()">重置</el-button>
      </el-form-item>
      <el-divider></el-divider>
      <el-form-item>
        <el-button icon="el-icon-plus" size="small" type="primary" style="margin-right: 10px"
                   @click="autoReadeEvent">客观题批阅
        </el-button>
      </el-form-item>
    </el-form>

    <div class="avue-crud">
      <el-table
          :data="dataList"
          border
          v-loading="dataListLoading">
        <el-table-column
            prop="courseName"
            header-align="center"
            align="center"
            label="课程">
        </el-table-column>
        <el-table-column
            prop="content"
            header-align="center"
            align="center"
            label="题目">
        </el-table-column>
<!--        <el-table-column-->
<!--            prop="difficulty"-->
<!--            header-align="center"-->
<!--            align="center"-->
<!--            label="难度等级">-->
<!--          <template slot-scope="scope">-->
<!--            <el-tag v-if="scope.row.difficulty === 0">低</el-tag>-->
<!--            <el-tag v-if="scope.row.difficulty === 1" type="danger">中</el-tag>-->
<!--            <el-tag v-if="scope.row.difficulty === 2" type="info">高</el-tag>-->
<!--            <el-tag v-if="scope.row.difficulty === 3" type="warning">超高</el-tag>-->
<!--          </template>-->
<!--        </el-table-column>-->
        <el-table-column
            prop="type"
            header-align="center"
            align="center"
            label="类型">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.type === 0">单选题</el-tag>
            <el-tag v-if="scope.row.type === 1" type="danger">多选题</el-tag>
            <el-tag v-if="scope.row.type === 2" type="info">判断题</el-tag>
            <el-tag v-if="scope.row.type === 4" type="info">主观题</el-tag>
          </template>
        </el-table-column>
        <el-table-column
            prop="answer"
            header-align="center"
            align="center"
            label="客观题标准答案">
        </el-table-column>
        <el-table-column
            prop="discussContext"
            header-align="center"
            align="center"
            label="主观题标准答案">
        </el-table-column>
        <el-table-column
            prop="knowledge"
            header-align="center"
            align="center"
            label="知识点">
        </el-table-column>
        <el-table-column
            prop="studentName"
            header-align="center"
            align="center"
            label="学生">
        </el-table-column>
<!--        <el-table-column-->
<!--            prop="teacherName"-->
<!--            header-align="center"-->
<!--            align="center"-->
<!--            label="教师">-->
<!--        </el-table-column>-->
<!--        <el-table-column-->
<!--            prop="totalScore"-->
<!--            header-align="center"-->
<!--            align="center"-->
<!--            label="分值">-->
<!--        </el-table-column>-->

        <el-table-column
            prop="optionAnswer"
            header-align="center"
            align="center"
            label="学生客观题答案">
        </el-table-column>

        <el-table-column
            prop="discussContextAnswer"
            header-align="center"
            align="center"
            label="学生主观题答案">
        </el-table-column>

        <el-table-column
            prop="status"
            header-align="center"
            align="center"
            label="批阅情况">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.status === 0">未批阅</el-tag>
            <el-tag v-if="scope.row.status === 1" type="danger">已批阅</el-tag>
          </template>
        </el-table-column>

        <el-table-column
            prop="actualScore"
            header-align="center"
            align="center"
            label="得分">
        </el-table-column>
        <el-table-column
            prop="teacherNotes"
            header-align="center"
            align="center"
            label="教师批注">
        </el-table-column>

<!--        <el-table-column-->
<!--            prop="createTime"-->
<!--            header-align="center"-->
<!--            align="center"-->
<!--            label="创建时间">-->
<!--        </el-table-column>-->
<!--        <el-table-column-->
<!--            prop="updateTime"-->
<!--            header-align="center"-->
<!--            align="center"-->
<!--            label="更新时间">-->
<!--        </el-table-column>-->
        <el-table-column
            header-align="center"
            align="center"
            label="操作">
          <template slot-scope="scope">
            <el-button v-if="scope.row.status===0&& scope.row.type===4" type="text" size="small" icon="el-icon-edit"
                       @click="obtainScore(scope.row.id,scope.row.totalScore)">打分
            </el-button>

          </template>
        </el-table-column>
      </el-table>
    </div>

    <div class="avue-crud__pagination">
      <el-pagination
          @size-change="sizeChangeHandle"
          @current-change="currentChangeHandle"
          :current-page="pageIndex"
          :page-sizes="[5, 10, 20, 50]"
          :page-size="pageSize"
          :total="totalPage"
          background
          layout="total, sizes, prev, pager, next, jumper">
      </el-pagination>
    </div>
    <!-- 弹窗, 新增 / 修改 -->
    <obtain-score v-if="obtainScoreVisible" ref="obtainScore" @refreshDataList="getDataList"></obtain-score>
  </div>
</template>

<script>
import {taskListQuestion, readePage,autoReadeQuestion} from '@/api/teacher/workTask'
import obtainScore from './obtain-socre.vue'

export default {
  data() {
    return {
      dataForm: {
        id: '',
        content: '',
        studentName:'',
        status:''
      },
      tasks:[],

      obtainScoreVisible: false,
      searchForm: {},
      dataList: [],
      pageIndex: 1,
      pageSize: 5,
      totalPage: 0,
      dataListLoading: false,
    }
  },
  components: {
    obtainScore
  },
  created() {
    this.taskInit();
    this.getDataList()
  },
  methods: {

    taskInit(){
      taskListQuestion(Object.assign({
      })).then(response => {
        this.tasks = response.data
      })
    },

    autoReadeEvent(){

      if(!this.dataForm.id){
        this.$message.success('请选择试卷')
        return
      }

      autoReadeQuestion(Object.assign({'id':this.dataForm.id
      })).then(response => {
        this.$message.success('阅卷成功')
      })
    },

    resetForm(){
      this.dataForm.content='';
      this.dataForm.courseName='';
      this.dataForm.studentName='';
      this.dataForm.status='';
      this.$refs['dataForm'].resetFields()
      this.getDataList()
    },
    // 获取数据列表
    getDataList() {
      this.dataListLoading = true
      readePage(Object.assign({
        current: this.pageIndex,
        size: this.pageSize
      }, this.dataForm)).then(response => {
        this.dataList = response.data.records
        this.totalPage = response.data.total
      })
      this.dataListLoading = false
    },
    // 每页数
    sizeChangeHandle(val) {
      this.pageSize = val
      this.pageIndex = 1
      this.getDataList()
    },
    // 当前页
    currentChangeHandle(val) {
      this.pageIndex = val
      this.getDataList()
    },
    // 新增 / 修改
    obtainScore(id,score) {
      this.obtainScoreVisible = true
      this.$nextTick(() => {
        this.$refs.obtainScore.init(id,score)
      })
    },

    // 删除
    deleteHandle(id) {
      this.$confirm('是否确认删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(function () {
        return delObj(id)
      }).then(data => {
        this.$message.success('删除成功')
        this.getDataList()
      })
    }
  }
}
</script>
